<script setup>

import {
  Avatar, Calendar, ChatLineSquare, ChatRound,
  Cherry, Coordinate, GoodsFilled,
  InfoFilled,
  Iphone, Loading, Message,
  PieChart,
  Place, Promotion,
  ShoppingCartFull, Star, User, Wallet,
  WalletFilled
} from "@element-plus/icons-vue";
import {inject, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {doGet, doPost, doPut} from "@/util/request.js";
import {showMessage} from "@/util/message.js";

//刷新页面
const refresh=inject('refresh')
//配置路由对象
const router = useRouter();
const route = useRoute();
//创建表单对象
const clueDetail = ref({})
//弹窗显示控制
const dialogVisible = ref(true)
//定义操作类型对象
const type = ref('add')

//查询详情数据
let clueId = route.params.id
const loadClueDetail = (clueId) => {
  //发送请求获取详情数据
  doGet('/api/clue/detail/' + clueId, {}).then(resp => {
    if (resp.data.code === 200) {
      clueDetail.value = resp.data.data
    }
  }).catch()
}
//登录用户对象信息
const loginUserInfo = ref({})
// 加载登录用户信息
const loadLoginUserInfo = () => {
  doGet('/api/user/login/info').then(resp => {
    if (resp.data.code === 200) {
      loginUserInfo.value = resp.data.data
    }
  })
}
//市场活动对象
const activityList = ref([])
//获取市场活动列表
const loadActivityList = () => {
  doGet('/api/activity/list', {}).then(resp => {
    if (resp.data.code === 200) {
      activityList.value = resp.data.data
    }
  })
}
//称呼列表
const appellationList = ref([])
//获取是否需要贷款列表
const needLoanList = ref([])
//意向状态列表
const intentionStateList = ref([])
//线索状态列表
const stateList = ref([])
//线索来源列表
const sourceList = ref([])
//跟踪方式列表
const noteWayList = ref([])
//获取字典值列表
const loadDicValueList = (typeCode) => {
  doGet('/api/dic/value/list/' + typeCode, {}).then(resp => {
    if (resp.data.code === 200) {
      if (typeCode === 'appellation') {
        appellationList.value = resp.data.data
      } else if (typeCode === 'needLoan') {
        needLoanList.value = resp.data.data
      } else if (typeCode === 'intentionState') {
        intentionStateList.value = resp.data.data
      } else if (typeCode === 'clueState') {
        stateList.value = resp.data.data
      } else if (typeCode === 'source') {
        sourceList.value = resp.data.data
      }
    } else {
      showMessage('查询字典值列表失败', resp.data.msg, 'error')
    }
  })
}
const productList = ref([])
// 查询所有产品列表
const loadProductList = () => {
  doGet('/api/product/list', {}).then(resp => {
    if (resp.data.code === 200) {
      productList.value = resp.data.data;
    } else {
      showMessage('查询产品列表失败，原因：' + resp.data.msg, 'error')
    }
  })
}
//验证表单
const clueRules = {
  activityId: [
    {required: true, message: '活动名称不能为空', trigger: ['change','blur']}
  ],
  fullName: [
    {required: true, message: '姓名不能为空', trigger: 'blur'},
    {pattern: /^[\u4e00-\u9fa5]{2,4}$/, message: '姓名格式不正确', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '手机号码不能为空', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'}
  ]
}

//准备线索表单参数对象
const loadClueForm = ref({})
//提交表单
const submitForm = () => {
  //准备参数
  let params = {
    id: clueDetail.value.id,
    activityId: clueDetail.value.activityId,
    fullName: clueDetail.value.fullName,
    phone: clueDetail.value.phone,
    qq: clueDetail.value.qq,
    weixin: clueDetail.value.weixin,
    email: clueDetail.value.email,
    age: clueDetail.value.age,
    job: clueDetail.value.job,
    yearIncome: clueDetail.value.yearIncome,
    address: clueDetail.value.address,
    appellation: clueDetail.value.appellation,
    needLoan: clueDetail.value.needLoan,
    state: clueDetail.value.state,
    source: clueDetail.value.source,
    intentionState: clueDetail.value.intentionState,
    intentionProduct: clueDetail.value.intentionProduct,
    description: clueDetail.value.description,
    nextContactTime: clueDetail.value.nextContactTime
  }
  if (type.value === 'edit') {
    doPut('/api/clue/editClue', params).then(resp => {
      if (resp.data.code === 200) {
        showMessage('修改成功', 'success')
        //关闭当前窗口
        router.go(-1)
      } else {
        showMessage('修改失败', 'error', resp.data.msg)
      }
    })
  } else {
    doPost('/api/clue/addClue', params).then(resp => {
      if (resp.data.code === 200) {
        showMessage('添加成功', 'success')
        //关闭当前窗口
        router.go(-1)
      } else {
        showMessage('添加失败','error', resp.data.msg )
      }
    })
  }
}
//弹窗
const dialogTableVisible = ref(false)
//表单对象
const gridData=ref({})
//查看备注
const remark=(id)=>{
  loadGridData(id)
}
const loadGridData=(clueId)=>{
  //发送请求，获取表格数据
  doGet('/api/clue/remarkList/' + clueId, {}).then(resp => {
    dialogTableVisible.value = true
    if (resp.data.code === 200) {
      gridData.value = resp.data.data
    } else {
      showMessage('查询活动备注失败', resp.data.msg, 'error')
    }
  })
}

//加载详情数据
onMounted(() => {
  //登录用户信息
  loadLoginUserInfo()
  //市场活动列表
  loadActivityList()
  //字典值列表（称呼）
  loadDicValueList('appellation')
  //是否需要贷款列表
  loadDicValueList('needLoan')
  //意向状态列表
  loadDicValueList('intentionState')
  //线索状态列表
  loadDicValueList('clueState')
  //线索来源列表
  loadDicValueList('source')
  //跟踪方式列表
  loadDicValueList('noteWay')

  //产品列表
  loadProductList()
  //判断操作类型
  if (clueId) {
    type.value = 'edit'
    loadClueDetail(clueId)
  } else {
    type.value = 'add'
  }
})

</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      class="warn-dialog"
      width="1080"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :align-center="true"
      :center="true"
      :overflow="true"
      :show-close="false"
      :title="type==='edit'?'编辑线索('+clueDetail.id+')':'录入线索'">
<el-form :rules="clueRules" :model="clueDetail">
    <el-descriptions ref="loadClueForm" class="margin-top" :model="clueDetail" :column="3" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user/>
            </el-icon>
            <span>
             负责人
            </span>
          </div>
        </template>
        <span v-if="type==='edit'">
            {{ clueDetail.ownerName }}
          </span>
        <span v-else>
            {{ loginUserInfo.name }}
          </span>
      </el-descriptions-item>

      <el-descriptions-item>

        <template #label>
          <div class="cell-item">
            <el-icon>
              <Promotion/>
            </el-icon>
            <span>
              活动名称
                <span style="color: red">*</span>
            </span>
          </div>
        </template>
        <el-form-item style="height: 10px" prop="activityId">
        <el-select v-model="clueDetail.activityId" placeholder="请选择活动">
          <el-option v-for="activity in activityList"
                     :key="activity.id"
                     :label="activity.name"
                     :value="activity.id"/>
        </el-select>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Avatar/>
            </el-icon>
            用户姓名
            <span style="color: red">*</span>
          </div>
        </template>
        <el-form-item style="height: 10px" prop="fullName">
        <el-input v-model="clueDetail.fullName" placeholder="请填写用户姓名"/>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <PieChart/>
            </el-icon>
            年龄
          </div>
        </template>
        <el-form-item style="height: 10px" prop="age">
        <el-input v-model="clueDetail.age" placeholder="请填写用户年龄"/>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Cherry/>
            </el-icon>
            用户称呼
          </div>
        </template>
        <el-form-item style="height: 10px" prop="appellation">
        <el-select v-model="clueDetail.appellation" placeholder="请选择用户称呼">
          <el-option v-for="item in appellationList"
                     :key="item.id"
                     :label="item.typeValue"
                     :value="item.id"/>
        </el-select>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <GoodsFilled/>
            </el-icon>
            职业
          </div>
        </template>
        <el-form-item style="height: 10px" prop="job">
        <el-input v-model="clueDetail.job" placeholder="请填写用户职业"/>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Iphone/>
            </el-icon>
            电话
            <span style="color: red">*</span>
          </div>
        </template>
        <el-form-item style="height: 10px" prop="phone" slot="label">
          <el-input v-model="clueDetail.phone"
                    placeholder="请填写用户电话"/>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <ChatRound/>
            </el-icon>
            微信号
          </div>
        </template>
        <el-form-item style="height: 10px" prop="weixin">
        <el-input v-model="clueDetail.weixin" placeholder="请填写用户微信号"/>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Search/>
            </el-icon>
            QQ号
          </div>
        </template>
        <el-form-item style="height: 10px" prop="qq">
          <el-input v-model="clueDetail.qq" placeholder="请填写用户QQ号"/>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Message/>
            </el-icon>
            邮箱
          </div>
        </template>
        <el-form-item style="height: 10px" prop="email">
          <el-input v-model="clueDetail.email" placeholder="请填写用户邮箱"/>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Place/>
            </el-icon>
            地址
          </div>
        </template>
        <el-form-item style="height: 10px" prop="address">
        <el-input v-model="clueDetail.address" placeholder="请填写用户地址"/>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Wallet/>
            </el-icon>
            年收入
          </div>
        </template>
        <el-form-item style="height: 10px" prop="yearIncome">
          <el-input v-model="clueDetail.yearIncome" placeholder="请填写用户年收入"/>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <WalletFilled/>
            </el-icon>
            是否贷款
          </div>
        </template>
        <el-form-item style="height: 10px" prop="needLoan">
          <el-select v-model="clueDetail.needLoan" placeholder="请选择用户是否贷款">
            <el-option v-for="activity in needLoanList"
                       :key="activity.id"
                       :label="activity.typeValue"
                       :value="activity.id"/>
          </el-select>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Star/>
            </el-icon>
            意向状态
          </div>
        </template>
        <el-form-item style="height: 10px" prop="intentionState">
          <el-select v-model="clueDetail.intentionState" placeholder="请选择用户意向状态">
            <el-option v-for="activity in intentionStateList"
                       :key="activity.id"
                       :label="activity.typeValue"
                       :value="activity.id"/>
          </el-select>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <ShoppingCartFull/>
            </el-icon>
            意向产品
          </div>
        </template>
        <el-form-item style="height: 10px" prop="intentionProduct">
          <el-select v-model="clueDetail.intentionProduct" placeholder="请选择用户意向产品">
            <el-option
                v-for="item in productList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Loading/>
            </el-icon>
            线索状态
          </div>
        </template>
        <el-form-item style="height: 10px" prop="state">
          <el-select v-model="clueDetail.state" placeholder="请选择线索状态">
            <el-option
                v-for="item in stateList"
                :key="item.id"
                :label="item.typeValue"
                :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Coordinate/>
            </el-icon>
            线索来源
          </div>
        </template>
        <el-form-item style="height: 10px" prop="source">
          <el-select v-model="clueDetail.source" placeholder="请选择线索来源">
            <el-option
                v-for="item in sourceList"
                :key="item.id"
                :label="item.typeValue"
                :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Calendar/>
            </el-icon>
            下次联系时间
          </div>
        </template>
        <el-form-item style="height: 10px" prop="nextContactTime">
          <el-date-picker
              v-model="clueDetail.nextContactTime"
              type="datetime"
              placeholder="请填写下次联系时间"
              format="YYYY-MM-DD hh:mm:ss"
              value-format="YYYY-MM-DD hh:mm:ss"/>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item width="120px">
        <template #label>
          <el-icon>
            <ChatLineSquare/>
          </el-icon>
          线索描述
          <el-tooltip
              class="box-item"
              effect="light"
              content="请点击查看备注"
              placement="right"
              v-if="type === 'edit'">
            <el-icon>
              <InfoFilled @click="remark(clueDetail.id)"/>
            </el-icon>
          </el-tooltip>
        </template>
        <el-form-item style="height: 10px" prop="description">
          <el-input type="textarea" :rows="1" v-model="clueDetail.description" placeholder="请填写线索描述"/>
        </el-form-item>
      </el-descriptions-item>

    </el-descriptions>
    <div class="topUp" :style="type==='edit'?'margin-left: 900px' : 'margin-left: 850px'">
<!--      <el-button type="success" @click="addNote" v-if="type === 'edit'">添加备注</el-button>-->
      <el-button type="primary" @click="submitForm(loadClueForm)">提交</el-button>
      <el-button type="info" @click="router.back()">返回</el-button>
    </div>
</el-form>
  </el-dialog>

  <!-- 活动备注弹窗 -->
  <el-dialog v-model="dialogTableVisible" center title="线索备注" width="800">
    <el-table :border="true" :data="gridData">
      <el-table-column property="createByName" width="100" label="负责人" align="center"/>
      <el-table-column property="noteWayName" label="跟踪方式" align="center"/>
      <el-table-column property="noteContent" label="跟踪内容" align="center"/>
      <el-table-column property="createTime" label="创建时间" align="center"/>
      <el-table-column label="备注操作" align="center">
        <template #default="scope">
          <el-button size="small" type="danger" @click="deleteNote(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <!--添加备注弹框-->
  <el-dialog v-model="tianJiaBeiZhu" center title="添加备注" width="40%">
    <el-form :model="addNoted" style="margin-left: 3px;margin-top: 1px">
      <el-select v-model="addNoted.noteWay" placeholder="请选择线索状态">
        <el-option
            v-for="item in noteWayList"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
      <el-input type="textarea" style="width: 100%; min-height: 50px; max-height: 200px; resize: vertical;"
                :rows="3"
                v-model="addNoted.noteContent">
      </el-input>
      <el-button type="primary" style="margin-left: 480px;margin-top: 5px" @click="addButton(clueDetail.id)">
        添加
      </el-button>
    </el-form>
  </el-dialog>

</template>

<style scoped>

</style>